<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header content="订单详情" @back="$router.back()" />
        </el-card>
        <el-card class="!border-none mb-4" shadow="never" v-if="!order_id">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="商品名称" prop="name">
                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="规格" prop="guige">
                    <el-input class="w-[280px]" v-model="queryParams.guige" clearable placeholder="请输入规格" />
                </el-form-item>
                <el-form-item label="单价" prop="price">
                    <el-input class="w-[280px]" v-model="queryParams.price" clearable placeholder="请输入单价" />
                </el-form-item>
                <el-form-item label="物料编号" prop="wuliaoNo">
                    <el-input class="w-[280px]" v-model="queryParams.wuliaoNo" clearable placeholder="请输入物料编号" />
                </el-form-item>
                <el-form-item label="交货时间" prop="de_time">
                    <daterange-picker v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time" />
                </el-form-item>

                <el-form-item label="创建时间" prop="create_time">
                    <el-input class="w-[280px]" v-model="queryParams.create_time" clearable placeholder="请输入创建时间" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input class="w-[280px]" v-model="queryParams.remark" clearable placeholder="请输入备注" />
                </el-form-item>
                <el-form-item label="客户订单号" prop="orderNo">
                    <el-input class="w-[280px]" v-model="queryParams.orderNo" clearable placeholder="请输入客户订单号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-descriptions :column="4" border v-if="order_id">
            <el-descriptions-item label="客户">{{ info.name }}</el-descriptions-item>
            <el-descriptions-item label="客户订单号">{{ info.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="制单">{{ info.create }}({{ info.create_time }})</el-descriptions-item>
            <el-descriptions-item label="审核">{{ info.shenhe == 0 ? '待审核' : info.shenhe }}
                ({{ info.shenhe_time }})</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ info.create_time }}</el-descriptions-item>
            <el-descriptions-item label="交货时间"><el-tag>{{ info.de_time }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="备注">{{ info.remark }}</el-descriptions-item>
            <el-descriptions-item label="收货人电话">{{ info.kehu_address.phone }}</el-descriptions-item>
            <el-descriptions-item label="收货人">{{ info.kehu_address.name }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{ info.kehu_address.address }}</el-descriptions-item>
            <el-descriptions-item label="订单总额">{{ info.detail_total }}</el-descriptions-item>
            <el-descriptions-item label="订单数量">{{ info.nums }}</el-descriptions-item>
        </el-descriptions>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
           
            <el-button v-perms="['fahuo.fahuo/list']" v-if="fahuo" type="primary" @click="handleFahuo">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                发货
            </el-button>
            <el-button v-perms="['orders.orders/shenhe']" v-if="info.is_shenhe == 0" type="warning"
                @click="handleShenhe">
                <template #icon>
                    <icon name="el-icon-Finished" />
                </template>
                审核
            </el-button>
            <el-button v-perms="['orders.orders_detail/delete']" v-if="lists" :disabled="!selectData.length"
                @click="handleDelete(selectData)">
                删除
            </el-button>
            <div class="mt-4">
                <el-table :data="pager.lists" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" v-if="lists" />
                    <el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
                    <el-table-column label="产品类型" prop="protype">
                        <template #default="{ row }">
                            <dict-value :options="dictData.protype" :value="row.protype" />
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="商品名称" prop="name" show-overflow-tooltip />
                    <el-table-column label="规格" prop="guige" show-overflow-tooltip />
                    <el-table-column label="下单数量" prop="num" show-overflow-tooltip />
                    <el-table-column label="下料" prop="xialiao_num"  show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-button v-perms="['orders.orders_xialiao/lists']" type="primary"
                                @click="handleXialiao(row)" link>
                                {{ row.xialiao_num }}
                            </el-button>

                        </template>
                    </el-table-column>
                    <el-table-column label="单价" prop="price" v-if="lists" show-overflow-tooltip />

                    <el-table-column label="单位" prop="unit">
                        <template #default="{ row }">
                            <dict-value :options="dictData.unit" :value="row.unit" />
                        </template>
                    </el-table-column>

                    <el-table-column label="物料编号" prop="wuliaoNo" show-overflow-tooltip />
                    <el-table-column label="图纸" prop="tuzhi">
                        <template #default="{ row }">
                            <el-image style="width:50px;height:50px;" :preview-src-list="[row.tuzhi]" :src="row.tuzhi"
                                preview-teleported />
                        </template>
                    </el-table-column>
                    <el-table-column label="合计" prop="price" v-if="lists" show-overflow-tooltip>
                        <template #default="{ row }">
                            {{ row.price * row.num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button v-perms="['orders.orders_detail/edit']" v-if="lists" type="primary" link
                                @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-button v-perms="['orders.orders_detail/edit']" v-if="todo && row.num > row.xialiao_num"
                                type="primary" link @click="handleXiaoliaoEdit(row)">
                                下料
                            </el-button>
                            <el-button v-perms="['orders.orders_detail/delete']" v-if="lists" type="danger" link
                                @click="handleDelete(row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
        <xialiao-popup v-if="showXialiao" ref="xialiaoRef" :dict-data="dictData" @success="getLists"
            @close="showXialiao = false" />
        <el-dialog v-model="showXialiaolist" :close-on-click-modal="false" :close-on-press-escape="false" @close="getLists">
            <xialiao-list ref="xialiaolistsRef" />
        </el-dialog>
        <fahuo-edit-popup v-if="showFhuoEdit" ref="fahuoEditRef" :dict-data="dictData" @success="getLists" @close="showFhuoEdit = false" />

    </div>
</template>

<script lang="ts" setup name="ordersDetailLists">

import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiOrdersDetailLists, apiOrdersDetailDelete } from '@/api/orders/orders_detail'
import { apiOrdersDetail, apiOrdersShenhe } from "@/api/orders/orders";
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import XialiaoPopup from '../xialiao/edit.vue'
import FahuoEditPopup from '../fahuo/add.vue'
import XialiaoList from '../xialiao/index.vue'
import useUserStore from "@/stores/modules/user";
import { getRoutePath } from '@/router'
const emit = defineEmits(['success', 'close'])
const userStore = useUserStore();
const route = useRoute()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const xialiaoRef = shallowRef<InstanceType<typeof XialiaoPopup>>()
const xialiaolistsRef = shallowRef<InstanceType<typeof XialiaoList>>()
const fahuoEditRef = shallowRef<InstanceType<typeof FahuoEditPopup>>()

// 是否显示编辑框
const showEdit = ref(false)
const showXialiao = ref(false)
const showXialiaolist = ref(false)
const showFhuoEdit = ref(false)

// 查询条件
const queryParams = reactive({
    order_id: route.query.order_id,
    name: '',
    guige: '',
    price: '',
    wuliaoNo: '',
    de_time: '',
    create_time: '',
    remark: '',
    orderNo: '',
    start_time: '',
    end_time: ''

})
const info = reactive({
    name: '',
    id: '',
    create: '',
    create_time: '',
    detail_total: '',
    detail_num: '',
    de_time: '',
    kehu_address: {},
    orderNo: '',
    remark: '',
    shenhe: 0,
    nums: 0,
    is_shenhe: 0,
    shenhe_time: ''
})

const order_id = ref(route.query.order_id ? route.query.order_id : false)
const todo = ref(route.query.todo ? route.query.todo : false)
const lists = ref(route.query.lists ? route.query.lists : false)
const fahuo = ref(route.query.fahuo ? route.query.fahuo : false)
// 选中数据
const selectData = ref<any[]>([])
const getDetails = async () => {
    const data = await apiOrdersDetail({
        id: route.query.order_id
    })
    Object.keys(info).forEach((key) => {
        //@ts-ignore
        info[key] = data[key]
    })
}
//发货
const handleFahuo= async(data:any)=>{
    showFhuoEdit.value=true
    await nextTick()
    fahuoEditRef.value?.open('add')
    fahuoEditRef.value?.setFormData(info)
}
const handleXialiao = async (data: any) => {
    showXialiaolist.value = true
    await nextTick()
    xialiaolistsRef.value?.setFormData(data)

}
// 下料
const handleXiaoliaoEdit = async (data: any) => {
    showXialiao.value = true
    await nextTick()
    xialiaoRef.value?.open('add')
    data.xialiao = 1
    xialiaoRef.value?.setFormData(data)
}
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('unit,protype')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiOrdersDetailLists,
    params: queryParams
})
//审核
const handleShenhe = async () => {
    await feedback.confirm('确定要审核吗？')
    let data = {
        id: info.id,
        shenhe: userStore.userInfo.name
    }
    await apiOrdersShenhe(data)

    emit('success')
    getDetails()
}
// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
    editRef.value?.setFormData({ order_id: queryParams.order_id })
}

// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}


// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiOrdersDetailDelete({ id })
    getLists()
}
if (route.query.order_id) {
    getDetails();
}

getLists()
</script>

